<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
export default {
    name: 'CZMLProperties',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            const viewer = window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                }),
                shouldAnimate: true,//开启动画
            });
            window.viewer.scene.globe.depthTestAgainstTerrain = true;

            const czml = [//pocket
                //必须的节点，document
                {
                    id: "document",
                    name: "CZML Point - Time Dynamic",
                    version: "1.0",
                    clock: {
                        interval: "2012-08-04T16:00:00Z/2012-08-04T16:00:59Z",
                        currentTime: "2012-08-04T16:00:00",
                        // multiplier: 10,
                    },
                },
                {
                    id: "point",
                    // availability: "2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
                    position: {
                        // epoch: "2012-08-04T16:00:00Z",
                        cartographicDegrees: [
                            '2012-08-04T16:00:00Z',
                            -70,
                            20,
                            150000,
                            '2012-08-04T16:00:10Z',
                            -80,
                            44,
                            150000,
                            '2012-08-04T16:00:40Z',
                            -90,
                            18,
                            150000,
                            '2012-08-04T16:00:59Z',
                            -98,
                            52,
                            150000,
                        ],
                    },
                    point: {
                        color: {
                            rgba: [255, 255, 255, 128],
                        },
                        outlineColor: {
                            rgba: [255, 0, 0, 128],
                        },
                        outlineWidth: 3,
                        pixelSize: 15,
                    },
                    properties: {
                        //interval方式
                        // height: [
                        //     {
                        //         interval: "2012-08-04T16:00:00Z/2012-08-04T16:00:10Z",
                        //         number: 5
                        //     },
                        //     {
                        //         interval: "2012-08-04T16:00:10Z/2012-08-04T16:00:59Z",
                        //         number: 6
                        //     },
                        // ]

                        //sample方式
                        height: {
                            number: [
                                "2012-08-04T16:00:00Z", 5,
                                "2012-08-04T16:00:59Z", 6
                            ]
                        },

                        // position: {
                        //     cartesian: [
                        //         0, 4650397.56551457, -3390535.52275848, -4087729.48877329,
                        //         300, 3169722.12564676, -2787480.80604407, -5661647.74541255,
                        //         600, 1369743.14695017, -1903662.23809705, -6663952.07552171
                        //     ]
                        // }


                        // testRGB: [
                        //     {
                        //         interval: "2012-08-04T16:00:00Z/2012-08-04T16:00:10Z",
                        //         rgba: [255, 255, 255, 255]
                        //     },
                        //     {
                        //         interval: "2012-08-04T16:00:10Z/2012-08-04T16:00:59Z",
                        //         rgba: [255, 255, 255, 254]
                        //     },
                        // ]
                    }
                },
            ];
            let datasource = await viewer.dataSources.add(window.Cesium.CzmlDataSource.load(czml));
            setInterval(() => {
                console.log(datasource.entities.getById('point').properties.height.getValue(viewer.clock.tick()))
            }, 5000)
        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  